<script setup lang="ts">
import { ref } from "vue";
import { find } from "lodash";
import { LMarker, LPopup } from "@vue-leaflet/vue-leaflet";
import { useMapStore } from "@/store";
import { useLocalStore } from "../../../store/index";
import { MAP_ACTION } from "@/views/pipe-network/constants";
import { deletePoint, queryPoints } from "@/api/pipe";
import LMarkerClusterGroup from "../MarkerCluster/index.vue";
import "vue-leaflet-markercluster/dist/style.css";
import { getAssetsFile } from "@/utils/map";
const { L }: any = window;
const props = defineProps({
  deviceCategoryList: Array<any>,
  alarmData: Array<any>,
  alarmAttribute: Array<any>,
});
const pointListRef = ref([]);
const dialogVisible = ref<boolean | number>(false);
const mapStore = useMapStore();
const { mapAction } = storeToRefs(mapStore);
const localStore = useLocalStore();
const { markerClusterFlag, visiblePointClassIds } = storeToRefs(localStore);
const mck = ref(0);
const receiveAlarmData = ref(props.alarmData);
const alarmAttributeData = ref(props.alarmAttribute);
const alarmAttributeShowData = ref([]);
const onClick = (e: any) => {
  // const isConnectionTwoPointsAction =
  //   mapAction.value === MAP_ACTION.CONNECTION_POINT_TWO;
  // const isModifyInfoAction = mapAction.value === MAP_ACTION.EDIT;
  // if (isConnectionTwoPointsAction) {
  //   mapStore.addSelectedMarkers(e.latlng);
  // }
  // if (isModifyInfoAction) {
  //   const { pointId } = e.target.options.attribution;
  //   const obj = pointListRef.value.find(
  //     (item: any) => item.pointId === pointId
  //   );
  //   if (obj) {
  //     mapStore.setEditingPipePoint(obj);
  //   }
  // }
};

function f_GetWarningHtml(pointId) {
  let data = find(receiveAlarmData.value, { pointId: pointId });
  let str =
    '<div style="width: 220px;" id="mypop">' +
    '<div style="border-top-left-radius: 11px;border-top-right-radius: 11px;height: 32px;line-height: 32px;color: #fff;text-align: center;background: #FFC107;"' +
    ">上报信息</div>" +
    '<p style="margin: 10px;"><span style="font-weight: bold;">管点名称：</span>' +
    data.pointName +
    "</p>" +
    '<p style="margin: 10px;"><span style="font-weight: bold;">地址：</span>' +
    data.address +
    "</p>" +
    '<p style="margin: 10px;"><span style="font-weight: bold;">上报时间：</span>' +
    (data.receiveTime ? data.receiveTime.replace("T", " ") : "-") +
    "</p>";

  data.alarmData.forEach((item) => {
    str +=
      '<p style="margin: 10px;"><span style="font-weight: bold;">' +
      item.label +
      "：</span>" +
      item.value +
      "</p>";
  });

  str += "</div>";

  return str;
}

const getIcon = (classId: string) => {
  const pointCategoryList = props.deviceCategoryList?.point;
  if (pointCategoryList) {
    const obj = pointCategoryList.find((item: any) => item.classId === classId);
    if (obj) {
      const { image } = obj;
      const iconUrl = getAssetsFile("device/" + image + ".png");
      return L.icon({
        iconUrl,
        iconSize: [36, 36],
        iconAnchor: [16, 27],
      });
    }
  }
};

watchEffect(() => {
  alarmAttributeData.value = props.alarmAttribute;
  receiveAlarmData.value = props.alarmData.map((item: any) => {
    const position =
      item.position != "string" ? JSON.parse(item.position) : [0, 0];
    let receiveJson = {};
    if (typeof item.receiveJson == "string") {
      receiveJson = item.receiveJson ? JSON.parse(item.receiveJson) : {};
    }

    let alarmData = [];
    Object.keys(receiveJson).forEach((key) => {
      const isShow = find(alarmAttributeData.value, { AttrKey: key });
      if (isShow.IsShow) {
        alarmData.push({ label: isShow.AttrName, value: receiveJson[key] });
      }
    });
    item.alarmData = alarmData;
    if (item.receiveJson && typeof item.receiveJson == "string") {
      item.receiveJson = JSON.parse(item.receiveJson);
    } else {
      item.receiveJson = [];
    }
    return {
      ...item,
      latlng: [position[1], position[0]],
      icon: getIcon(item.classId),
    };
  });

  // debugger;
  // console.log(receiveAlarmData.value);

  // if (Array.isArray(visiblePointClassIds.value)) {
  //   pointListRef.value.forEach((item: any) => {
  //     item.visible = visiblePointClassIds.value.includes(item.classId);
  //   });
  //   mck.value = pointListRef.value.filter(
  //     (item: any) => item.visible !== false
  //   );
  // } else {
  //   pointListRef.value.forEach((item: any) => {
  //     item.visible = true;
  //   });
  //   mck.value = 0;
  // }
});
</script>

<template v-if="positionRef">
  <LMarkerClusterGroup v-if="markerClusterFlag" :key="mck">
    <LMarker
      :key="pointId"
      v-for="{ latlng, pointId, icon } in receiveAlarmData"
      :lat-lng="latlng"
      :icon="icon"
      @click="onClick"
    >
      <LPopup :content="f_GetWarningHtml(pointId)" />
    </LMarker>
  </LMarkerClusterGroup>
  <template v-if="!markerClusterFlag">
    <LMarker
      :key="pointId"
      v-for="{ latlng, pointId, icon } in receiveAlarmData"
      :lat-lng="latlng"
      :icon="icon"
      @click="onClick"
    >
      <LPopup :content="f_GetWarningHtml(pointId)" />
    </LMarker>
  </template>
</template>

<style scoped lang="scss"></style>
